<template>
	<!-- todo 需要优化 样式和展示逻辑 -->
	<view class="container">
		<LoadingSpinner :show="loading" :text="loadingText" />

		<!-- 平台选择器 -->
		<scroll-view class="platform-list" scroll-x>
			<view v-for="platform in platforms" :key="platform.name" class="platform-item"
				:class="{ active: currentPlatform === platform.name }" @tap="switchPlatform(platform.name)">
				<text>{{ platform.title }}</text>
				<text class="subtitle">{{ platform.subtitle }}</text>
			</view>
		</scroll-view>

		<!-- 热搜列表 -->
		<scroll-view class="hot-list" scroll-y @scrolltolower="loadMore" refresher-enabled
			:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<view v-for="(item, index) in hotList" :key="index" class="hot-item" @tap="openDetail(item)">
				<view class="rank" :class="{ 'top-3': index < 3 }">{{ index + 1 }}</view>
				<view class="content">
					<view class="title">{{ item.title }}</view>
					<view class="desc" v-if="item.desc">{{ item.desc }}</view>
					<image v-if="item.pic" :src="item.pic" mode="aspectFill" class="pic" />
					<view class="hot-num" v-if="item.hot">
						<text class="num">{{ formatNum(item.hot) }}</text>
						<text class="label">热度</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 添加详情弹窗 -->
		<view class="detail-popup" v-if="showDetail" @tap="closeDetail">
			<view class="popup-content" @tap.stop>
				<view class="popup-header">
					<text class="popup-title">热搜详情</text>
					<text class="close-btn" @tap="closeDetail">×</text>
				</view>
				<view class="popup-body">
					<view class="detail-title">{{ currentDetail.title }}</view>
					<view class="detail-desc" v-if="currentDetail.desc">{{ currentDetail.desc }}</view>
					<image v-if="currentDetail.pic" :src="currentDetail.pic" mode="widthFix" class="detail-pic" />
					<view class="detail-hot" v-if="currentDetail.hot">
						<text class="hot-icon">🔥</text>
						<text class="hot-num">{{ formatNum(currentDetail.hot) }}</text>
						<text class="hot-label">热度</text>
					</view>
					<view class="detail-link" v-if="currentDetail.url">
						<text class="link-label">详情链接</text>
						<view class="link-content">
							<text class="link-text">{{ currentDetail.mobileUrl || currentDetail.url }}</text>
							<button class="copy-btn" @tap="copyLink">复制链接</button>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<text class="tip-text">复制链接后可在浏览器中查看完整内容</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getSupportedPlatforms, getHotSearch } from '@/api/hotnew'
import LoadingSpinner from '@/components/LoadingSpinner.vue'

const loading = ref(false)
const loadingText = ref('加载中...')
const refreshing = ref(false)
const platforms = ref([])
const currentPlatform = ref('weibo')
const hotList = ref([])
const showDetail = ref(false)
const currentDetail = ref({})

// 获取支持的平台列表
const getPlatforms = async () => {
	try {
		loading.value = true
		loadingText.value = '获取平台列表...'
		const res = await getSupportedPlatforms()

		// 过滤并格式化平台数据
		platforms.value = res.data.filter(item => item.name && item.title).map(item => ({
			name: item.name,
			title: item.title,
			subtitle: item.subtitle
		}))

		// 设置默认平台
		if (platforms.value.length > 0) {
			currentPlatform.value = platforms.value[0].name
		}
	} catch (error) {
		console.error('获取平台列表失败:', error)
		uni.showToast({
			title: '获取平台列表失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 切换平台
const switchPlatform = async (platform) => {
	if (platform === currentPlatform.value) return

	currentPlatform.value = platform
	hotList.value = [] // 清空当前列表
	await getHotList()
}

// 获取热搜列表
const getHotList = async () => {
	if (!currentPlatform.value) return

	try {
		loading.value = true
		loadingText.value = '获取热搜数据...'
		const res = await getHotSearch(currentPlatform.value)
		if (res.code === 200 && Array.isArray(res.data)) {
			hotList.value = res.data
		} else {
			throw new Error('数据格式错误')
		}
	} catch (error) {
		console.error('获取热搜数据失败:', error)
		uni.showToast({
			title: '获取热搜数据失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 格式化数字
const formatNum = (num) => {
	if (num >= 10000) {
		return (num / 10000).toFixed(1) + '万'
	}
	return num
}

// 打开详情
const openDetail = (item) => {
	currentDetail.value = item
	showDetail.value = true
}

// 关闭详情
const closeDetail = () => {
	showDetail.value = false
	currentDetail.value = {}
}

// 复制链接
const copyLink = () => {
	const url = currentDetail.value.mobileUrl || currentDetail.value.url
	uni.setClipboardData({
		data: url,
		success: () => {
			uni.showToast({
				title: '链接已复制',
				icon: 'success'
			})
		}
	})
}

// 下拉刷新
const onRefresh = async () => {
	refreshing.value = true
	await getHotList()
	refreshing.value = false
}

// 加载更多
const loadMore = () => {
	// 暂不实现
}

// 监听平台变化
watch(() => currentPlatform.value, async (newPlatform) => {
	if (newPlatform) {
		await getHotList()
	}
}, { immediate: true })

onMounted(async () => {
	await getPlatforms()
})
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f8f9fa;
	overflow: hidden;
}

.platform-list {
	white-space: nowrap;
	padding: 24rpx 32rpx;
	background: #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	position: sticky;
	top: 0;
	z-index: 1;

	.platform-item {
		display: inline-block;
		padding: 16rpx 32rpx;
		&:not(:last-child) {
			margin-right: 16rpx;
		}
		border-radius: 12rpx;
		background: #f0f2f5;
		text-align: center;
		transition: all 0.3s ease;

		text {
			display: block;
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
		}

		&.active {
			background: #3a7eff;
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);

			text {
				color: #fff;
			}

			.subtitle {
				color: rgba(255, 255, 255, 0.8) !important;
			}
		}

		.subtitle {
			font-size: 22rpx;
			color: #8c8c8c;
			margin-top: 6rpx;
		}
	}
}

.hot-list {
	flex: 1;
	padding: 16rpx 0;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;

	.hot-item {
		display: flex;
		padding: 24rpx 32rpx;
		background: #fff;
		margin: 0 32rpx 16rpx 32rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.985);
			transition: transform 0.15s ease;
		}

		.rank {
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 28rpx;
			color: #8c8c8c;
			font-weight: 500;

			&.top-3 {
				color: #fff;
				background: linear-gradient(135deg, #ff4d4f, #ff7875);
				border-radius: 8rpx;
			}
		}

		.content {
			flex: 1;
			margin-left: 24rpx;

			.title {
				font-size: 30rpx;
				line-height: 1.5;
				margin-bottom: 12rpx;
				font-weight: 500;
				color: #262626;
			}

			.desc {
				font-size: 26rpx;
				color: #595959;
				line-height: 1.5;
				margin: 8rpx 0 12rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				word-break: break-all;
			}

			.pic {
				width: 160rpx;
				height: 120rpx;
				border-radius: 12rpx;
				object-fit: cover;
				margin-top: 8rpx;
			}

			.hot-num {
				margin-top: 8rpx;
				display: flex;
				align-items: center;

				.num {
					font-size: 22rpx;
					color: #ff7875;
					font-weight: 500;
					margin-right: 4rpx;
				}

				.label {
					font-size: 22rpx;
					color: #8c8c8c;
					margin-left: 6rpx;
				}
			}
		}
	}
}

// 添加弹窗相关样式
.detail-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
	animation: fadeIn 0.2s ease-out;

	.popup-content {
		width: 100%;
		max-height: 80vh;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}

	.popup-header {
		padding: 24rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f0f0f0;

		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.close-btn {
			font-size: 40rpx;
			color: #999;
			padding: 10rpx;
		}
	}

	.popup-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;

		.detail-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			line-height: 1.5;
			margin-bottom: 20rpx;
		}

		.detail-desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 20rpx;
		}

		.detail-pic {
			width: 100%;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
		}

		.detail-hot {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-bottom: 30rpx;

			.hot-icon {
				font-size: 32rpx;
			}

			.hot-num {
				font-size: 28rpx;
				color: #ff4d4f;
				font-weight: 500;
			}

			.hot-label {
				font-size: 24rpx;
				color: #999;
			}
		}

		.detail-link {
			background: #f8f9fa;
			padding: 20rpx;
			border-radius: 12rpx;

			.link-label {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 12rpx;
				display: block;
			}

			.link-content {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.link-text {
					flex: 1;
					font-size: 24rpx;
					color: #3a7eff;
					word-break: break-all;
				}

				.copy-btn {
					background: #3a7eff;
					color: #fff;
					font-size: 24rpx;
					padding: 8rpx 24rpx;
					border-radius: 100rpx;
					border: none;
				}
			}
		}
	}

	.popup-footer {
		padding: 20rpx 30rpx;
		border-top: 1px solid #f0f0f0;
		text-align: center;

		.tip-text {
			font-size: 24rpx;
			color: #999;
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(50rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>